<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="a" >
    <div id="showInput"></div>
    <script>
        var obj={};var val='hello';
        Object.defineProperty(obj,'hello',{
            get:function(){
                console.log('get val');
                return val;
            },
            set:function(newVal){
                val=newVal;
                console.log('set val:'+val);
                document.getElementById('showInput').innerHTML=val
            }
        })
        // onchange事件适用于input\textarea\select元素上，支持各大浏览器，该事件只有在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效；
        // oninput事件适用于input\textarea\select元素，支持出IE外各大浏览器，该事件只有在键盘或者鼠标操作改变对象属性，只要属性发生变化就会触发事件，无需失去焦点。脚本触发无效；
        document.getElementById('a').oninput=function(e){
            console.log(e.target.value);
            obj.hello=e.target.value
        }
        console.log(obj.hello);
        // obj.hello='redux';
        // console.log(obj.hello)
    </script>
</body>
</html>